<template>
  <div>
    <!--显示-->
    <audio ref="audio" class="aud">
      <source src="@assets/537.mp3">
    </audio>
    <div class="screen_show">
      <div class="power">2:51 asa🔋</div>
      <van-tabs v-model:active="active" swipeable :show-header="false">
        <van-tab v-for="index in pageSize" :title="'标签 ' + index">
          <div class="wrapper">
            <div v-for="app in apps.slice(9*(index-1),9*(index-1)+9)" :key="app.key"
                 style="height: 55px;width: 50px;">
              <img class="app_img"
                   :src="app.img"
                   alt="app"/>
              <div>{{ app.name }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="points">
        <van-icon v-for="item in pageSize" size="6" name="stop-circle"
                  :color="item === Number(active) + 1 ? '#FFDCE5' : '#F088B5'"/>
      </div>
      <div class="face" @click="play">
        <img class="app_img"
             alt="face"
             src="@assets/face8.png"
             style="width: 100% ; object-fit: contain;"
        />

      </div>


    </div>


  </div>


</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue";


const apps = ref([
  {img: "/assets/app_1.jpg", name: "カメラ", page: "", key: "0"},
  {img: "/assets/app_2.jpg", name: "カメラ", page: "", key: "1"},
  {img: "/assets/app_3.gif", name: "カメラ", page: "", key: "2"},
  {img: "/assets/app_4.jpeg", name: "カメラ", page: "", key: "3"},
  {img: "/assets/app_5.jpeg", name: "カメラ", page: "", key: "4"},
  {img: "/assets/app_6.jpg", name: "カメラ", page: "", key: "5"},
  {img: "/assets/app_7.jpg", name: "カメラ", page: "", key: "6"},
  {img: "/assets/app_8.jpg", name: "カメラ", page: "", key: "7"},
  {img: "/assets/app_9.jpg", name: "フルバム", page: "", key: "8"},
  {img: "/assets/app_10.jpeg", name: "フォバム", page: "", key: "9"},
  {img: "/assets/app_11.jpeg", name: "相机", page: "camera", key: "10"},
  {img: "/assets/app_12.jpg", name: "ォトアル", page: "", key: "11"},
])

const pageSize = ref(Math.ceil(apps.value.length / 9))
onMounted(() => {
  pageSize.value = Math.ceil(apps.value.length / 9)
  console.log(pageSize.value)
})
const active = ref('')


const audio = ref()

function play() {
  audio.value.play();
}
</script>

<style scoped>


.container img {
  position: relative;
}

.screen_show {
  width: 100%;
}

.power {
  color: white;
  font-size: 12px!important;
  font-family: Yuanti SC, sans-serif;
}

.points {
  position: absolute;
  left: 42px;
  bottom: 46px;
  width: 100px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  grid-auto-rows: minmax(10px, auto);
}

.screen_show div {
  font-size: 8px;
  font-weight: bold;
}

.screen_show .app_img {
  width: 40px;
  height: 40px;
}

.face {
  width: 155px;
  height: 44px;
  background-color: #ffffff;
  position: absolute;
  left: 15px;
  top: 210px;
  border-radius: 10px;
}


</style>
